<?php include THEMES_PATH.'public/before_body2.phtml'; ?>
<style>
.banner {height:290px;background-repeat:no-repeat;background-position:center top;}
.questionnaire-head {margin-bottom:40px;padding-bottom:10px;border-bottom:1px solid #ccc;font-size:16px;text-align:left;}
.questionnaire-container dl {margin-bottom:40px;}
.questionnaire-container dt {margin-bottom:10px;font-size:16px;}
.questionnaire-container dd {display:block;width:98%;margin:5px 10px 5px 15px;}
.questionnaire-containerinput {margin-right:5px;}
.required {margin-left:20px;color:#eb6f00;}
.questionnaire-container textarea {width:99%;height:100px;margin:10px 0;padding:5px;border:1px solid #ccc;resize:none;}
@media screen and (max-width: 768px) {
	.questionnaire-head {margin:10px;}
	.questionnaire-container  dl {width:94%;margin:0 2% 20px;}
}
@media screen and (max-width: 320px) {
	.questionnaire-container dl {width:90%;}
}
</style>
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml'; ?>
<div class="banner" style="background-image:url(/statics/front/images/questionary/banner.jpg);"></div>
<div class="main-width questionnaire-container">
  <p class="heading"><strong style="background-color:#fff;"><?php echo L('_questionnaire_1');?></strong></p>
  <div class="questionnaire-head">
    <?php echo L('_questionnaire_2');?>
    <p style="margin-top:10px;text-indent:2em;"><?php echo L('_questionnaire_3');?></p>
  </div>
  <form name="questionnaireForm" id="questionnaireForm"  data-participated="<?php echo L('_QUESTIONNAIRE_');?>">
    <dl>
      <dt><?php echo L('_questionnaire_4');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup1" value="1"/>
          <?php echo L('_questionnaire_5');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup1" value="2"/>
          <?php echo L('_questionnaire_6');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup1" value="3"/>
          <?php echo L('_questionnaire_7');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup1" value="4"/>
          <?php echo L('_questionnaire_8');?>
        </label>
      </dd>
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_9');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup2" value="1"/>
           <?php echo L('_questionnaire_10');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup2" value="2"/>
          <?php echo L('_questionnaire_11');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup2" value="3"/>
         <?php echo L('_questionnaire_12');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup2" value="4"/>
          <?php echo L('_questionnaire_13');?>
        </label>
      </dd>
      <!--<dd>
        <label>
          <input type="radio" name="radioGroup2" value="5"/>
          <?php echo L('_questionnaire_14');?>
        </label>
      </dd>-->
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_15');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup3" value="1"/>
          <?php echo L('_questionnaire_16');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup3" value="2"/>
          <?php echo L('_questionnaire_17');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup3" value="3"/>
          <?php echo L('_questionnaire_18');?>
        </label>
      </dd>
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_19');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup4" value="1"/>
          <?php echo L('_questionnaire_20');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup4" value="2"/>
          <?php echo L('_questionnaire_21');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup4" value="3"/>
          <?php echo L('_questionnaire_22');?> 
        </label>
      </dd>
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_23');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup5" value="1"/>
          <?php echo L('_questionnaire_24');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup5" value="2"/>
          <?php echo L('_questionnaire_25');?>
        </label>
      </dd>
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_26');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup6" value="1"/>
          <?php echo L('_questionnaire_27');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup6" value="2"/>
          <?php echo L('_questionnaire_28');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup6" value="3"/>
         <?php echo L('_questionnaire_29');?>
        </label>
      </dd>
    </dl>
    <dl>
      <dt><?php echo L('_questionnaire_30');?></dt>
      <dd>
        <label>
          <input type="radio" name="radioGroup7" value="1"/>
          <?php echo L('_questionnaire_31');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup7" value="2"/>
          <?php echo L('_questionnaire_32');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup7" vlaue="3"/>
          <?php echo L('_questionnaire_33');?>
        </label>
      </dd>
      <dd>
        <label>
          <input type="radio" name="radioGroup7" value="4"/>
          <?php echo L('_questionnaire_34');?>
        </label>
      </dd>
    </dl>
    <dl>		
      <dt style="margin-top:30px;">
        <p><?php echo L('_questionnaire_38');?></p>
        <textarea name="message"></textarea>
      </dt>
      <dd style="margin-bottom:20px;font-size:16px;text-align:center;"><?php echo L('_questionnaire_35');?></dd>
	  <dd name="dosubmit" style="margin-bottom:50px;border:none;text-align:center;">
	    <span class="btn btn-middle js-do-submit"><?php echo L('_questionnaire_36');?></span>
      </dd>
    </dl>
  </form>
</div>
<script>
var $questionnaireForm = $('#questionnaireForm');
var clickEvent = unifyMobileDesktop.compatibleEvent({
	mobile: 'touchend',
	desktop: 'click'
});
$('.js-do-submit').on(clickEvent, function() {
	$questionnaireForm.find('dl').each(function() {
		var $question = $(this).find('dt');
		var $radio = $(this).find('input[type="radio"]');
		if ($radio.length > 0) {
			if ($radio.filter(':checked').length === 0) {
				if ($question.find('.js-required').length === 0) {
					$question.append("<label class='required js-required'><?php echo L("_following_");?></label>");
					$radio.eq(0).focus();
				}
			}
		}
	});
	
	$questionnaireForm.find('input[type="radio"]').on(clickEvent, function() {
		$(this).parents('dl').find('.js-required').remove();
	});
	
	if ($questionnaireForm.find('.js-required').length > 0) {
		return false;
	} else {
		var form_array =$('#questionnaireForm').serializeArray();
		$.ajax({
			url:url('article/ajax_questionary'),
			type:'POST',
			dataType:'JSON',
			data:form_array,
			success:function(response) {
				if (response.status === 'failure') {
					alert($questionnaireForm.data('participated'));					
				}else if (response.status === 'success') {
					alert(response.message);
					window.location.href = '/user/login';
				}
			}
		});
	}
});
</script>
<?php include THEMES_PATH.'public/footer2.phtml'; ?>

<?php include THEMES_PATH.'public/after_body.phtml'; ?>